<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心 - 公司职员管理系统</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon"/>
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入Font Awesome图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #3a7bd5;
            --secondary-color: #00d2ff;
            --sidebar-bg: #2c3e50;
            --sidebar-hover: #34495e;
            --content-bg: #f8f9fa;
            --card-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f0f2f5;
            color: #333;
            padding: 20px;
        }

        .header {
            background: white;
            padding: 15px 25px;
            margin-bottom: 25px;
            border-radius: 10px;
            box-shadow: var(--card-shadow);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .card {
            border-radius: 10px;
            box-shadow: var(--card-shadow);
            margin-bottom: 25px;
        }

        .card-header {
            background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 15px 20px;
            border-radius: 10px 10px 0 0 !important;
        }

        .form-label {
            font-weight: 600;
        }

        .btn-primary {
            background: var(--primary-color);
            border: none;
        }

        .btn-primary:hover {
            background: #2a68c8;
        }


        input[readonly] {
            background-color: #e9ecef;
            cursor: not-allowed;
        }

    </style>
</head>
<body>
    <div class="header">
        <h2 class="text-primary">个人中心</h2>
        <button class="btn btn-sm btn-primary" onclick="window.location.href='/company/index'">返回</button>
    </div>

    <div class="card">
        <div class="card-header">
            <h3><i class="fas fa-user-circle me-2"></i> 个人信息</h3>
        </div>
        <div class="card-body">
            <form action="/company/personalCenter1" method="post">
                <input type="hidden" name="id" th:value="${user.id}">
                <input type="hidden" name="employeeId" th:value="${user.employee.id}">
                <input type="hidden" name="roleId" th:value="${user.role.id}">
                <div class="row mb-3">
                    <label for="name" class="col-sm-2 col-form-label">姓名</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="name" th:value="${user.employee.name}" name="username"></input>
                    </div>
                </div>
                <div class="row mb-3">
                    <label for="gender" class="col-sm-2 col-form-label">性别</label>
                    <div class="col-sm-10" >
                        <select class="form-select" id="gender" name="gender">
                            <option value="M" th:selected="${user.employee.gender.toString()} == 'M'">男</option>
                            <option value="F" th:selected="${user.employee.gender.toString()} == 'F'">女</option>
                            <option value="Other" th:selected="${user.employee.gender.toString()} == 'Other'">其他</option>
                        </select>
                    </div>
                </div>
                <div class="row mb-3">
                    <label for="birthday" class="col-sm-2 col-form-label">出生日期</label>
                    <div class="col-sm-10">
                        <input type="date" class="form-control" id="birthday" th:value="${user.employee.birthDate}" name="birthDate">
                    </div>
                </div>
                <div class="row mb-3">
                    <label for="department" class="col-sm-2 col-form-label">部门</label>
                    <div class="col-sm-10">
                        <input type="text" id="department" th:value="${departmentName}" name="department" readonly>
                    </div>
                </div>
                <div class="row mb-3">
                    <label for="position" class="col-sm-2 col-form-label">职位</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="position" th:value="${user.role.name}" name="role" readonly>
                    </div>
                </div>
                <div class="row mb-3">
                    <label for="hireDate" class="col-sm-2 col-form-label">入职日期</label>
                    <div class="col-sm-10">
                        <input type="date" class="form-control" id="hireDate" th:value="${user.employee.hireDate}" name="hireDate" readonly>
                    </div>
                </div>
                <div class="row mb-3">
                    <label class="col-sm-2 col-form-label">联系方式</label>
                    <div class="col-sm-10">
                        手机：<input type="text" class="form-control" id="phone" th:value="${user.employee.phone}" name="phone"></input><br>
                        邮箱：<input type="text" class="form-control" id="email" th:value="${user.employee.email}" name="email"></input>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-10 offset-sm-2">
                        <button type="submit" class="btn btn-primary">保存更改</button>
                        <button type="reset" class="btn btn-secondary ms-2">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script>
document.addEventListener('DOMContentLoaded', function() {
        // 为不可更改的字段添加事件监听器
        const nonEditableFields = ['employeeId', 'department', 'position', 'hireDate'];

        nonEditableFields.forEach(fieldId => {
            const field = document.getElementById(fieldId);
            if (field) {
                field.addEventListener('focus', function() {
                    // 显示友好提示
                    const message = document.createElement('div');
                    message.className = 'alert alert-warning position-absolute w-25';
                    message.style.top = '10px';
                    message.style.right = '10px';
                    message.textContent = '此信息不可更改。';
                    document.body.appendChild(message);

                    setTimeout(() => {
                        message.remove();
                    }, 3000);

                    field.blur(); // 自动失去焦点
                });

                field.addEventListener('input', function() {
                    // 恢复原始值
                    field.value = field.dataset.originalValue;
                });

            }
        });
    });
</script>
</body>
</html>